<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        td {
            width: 100px
        }
    </style>
</head>
<body>
<table border="1">
    <caption>个人信息</caption>
    <tr>
        <td>照片:</td>
        <td id="pic_td"></td>
    </tr>
    <tr>
        <td>姓名:</td>
        <td id="name_td"></td>
    </tr>
    <tr>
        <td>年龄:</td>
        <td id="age_td"></td>
    </tr>
    <tr>
        <td>好友:</td>
        <td id="friends_td"></td>
    </tr>
</table>
<input type="button" value="加载数据" onclick="f()">
<script>
    function f() {
        //从服务器得到的数据一般会封装在一个自定义对象中
        // Person.java  添加属性和方法
        // Person p = new Person();
        // p.name="张三";
        //p.age=18;
        //JavaScript中实例化空对象
        let p = {};
        //动态添加属性和方法
        p.name = "张三";
        p.age = 18;
        p.run = function () {
            console.log(this.name + ":" + this.age);
        }
        //调用方法
        p.run();
        //实例化带有初始属性和方法的对象
        let p1 = {
            name: "李四",
            age: 20,
            run: function () {
                console.log(this.name+":"+this.age);
            }
        }
        p1.run();
        //准备一个对象把一个人的信息封装起来    此数据模拟来自服务器
        let personInfo = {name:"传奇哥女朋友",age:18,url:"../a.jpg",
            friends:["孙尚香","武则天","貂蝉"]}
        //把对象中的数据显示到页面中
        let nameTd = document.querySelector("#name_td");
        let ageTd = document.querySelector("#age_td");
        let picTd = document.querySelector("#pic_td");
        let friendsTd = document.querySelector("#friends_td");
        nameTd.innerText = personInfo.name;
        ageTd.innerText = personInfo.age;
        //创建图片标签
        let img = document.createElement("img");
        img.src = personInfo.url;
        img.width = 100;
        picTd.append(img);
        //创建无序列表
        let ul = document.createElement("ul");
        //遍历数组
        for (let name of personInfo.friends) {
            let li = document.createElement("li");
            li.innerText = name;
            ul.append(li);
        }
        friendsTd.append(ul);











    }
</script>
</body>
</html>




















